<template>
    <div class="main">

        <c-head :title="currentCateName" :cid="currentCid"></c-head>

     <!--   <div class="mainbox">

            <div class="goodslist">
                <div class="content"  v-if="showGoods.length >0">
                    <van-card
                            v-for="item in showGoods" :key="item.id"
                            :tag="item.is_recommend == 1 ? $t('shop.info.recommend') : ''"
                            :num="item.sales"
                            desc=""
                            :title="item.title"

                            @click="itemClick(item.id)"
                    >

                        <template #thumb>
                            <div class="thumb"><img v-lazy="item.cover_url" alt=""></div>
                        </template>
                        <template #desc>
                            <div class="desc">{{item.description}}</div>
                        </template>
                        <template #price>
                            <div class="sales"><small>￥</small>{{item.price+'.00'}}</div>
                        </template>
                    </van-card>

                </div>

                <div v-else style="text-align:center;font-size:14px;padding-top:60px;">
                    <van-loading v-if="loadshow"  color="#FFF" size="24px">{{$t('shop.info.loading')}}...</van-loading>
                    <span v-else style="color:#EFEFEF">{{$t('shop.info.nogoods')}}</span>
                </div>
            </div>

        </div>
-->
        <div class="wrapper">
            <div class="content">
                <div class="goodslist" >
                    <div class="goods">
                        <goods-list-item
                                v-for="(item,index) in showGoods" :key="item.id+index" :product="item"
                        ></goods-list-item>
                    </div>

                    <div  style="height:135px;width:100%;" v-for="ind in showGoods.length" :key="ind"> </div>

                </div>

            </div>
        </div>
        <back-top @bTop="bTop" v-show="isShowBackTop"></back-top>

      <!--  <menu-bar></menu-bar>-->
    </div>
</template>

<script>
    import CHead from "components/common/chead/chead";
/*    import MenuBar from "components/content/menubar/MenuBar";*/
    import BackTop from "components/common/backtop/BackTop";
    import GoodsListItem from "components/content/goods/GoodsListItem";
    import {getCategoryGoods} from 'network/category'

  //  import { Toast } from 'vant'

  //  import i18n from '@/i18n';
    import BScroll from 'better-scroll';

    export default {
        name: "CategoryList",
        components: {
            CHead,
            BackTop,
         /*   MenuBar,*/
            GoodsListItem,
        },
        data() {
            return {
                activeKey:0,
                categories:[],
                loadshow:true,
                goods:{
                    sales:{page:0, list:[]},
                    price:{page:0, list:[]},
                    comments_count:{page:0, list:[]},
                },
                currentOrder:'sales',
                currentCid:0,
                currentCateName:'',
                page:0,
                bscroll:null,
                isShowBackTop:false,

            }
        },
        computed: {
            showGoods() {
                return  this.goods[this.currentOrder].list;
            },


        },
        mounted() {
            this.currentCid = this.$route.query.cid;
            this.currentCateName =  this.$route.query.name;

            if(this.currentCid == 0) {
                this.page=0
                this.goods[this.currentOrder].list=[];
                this.goods[this.currentOrder].page = 0;
                this.getCategoryGoods();

            }

            this.$nextTick(() => {

                this.bscroll = new BScroll(document.querySelector('.wrapper'), {
                    probeType: 3,  // 0, 1, 2, 3, 3 只要在运运就触发scroll事件
                    click: true, // 是否允许点击
                    pullUpLoad: true //上拉加载更多， 默认是false
                });

                this.bscroll.on('scroll', (position)=>{

                    this.isShowBackTop = (-position.y) > 500;


                });

                this.bscroll.on('pullingUp', ()=>{
                    this.page =this.goods[this.currentOrder].page + 1;


                    // 完成上拉， 等数据请求完成， 要将新数据展示出来finishPullUp();
                    this.bscroll.finishPullUp();

                    //重新计算 better-scroll，当 DOM 结构发生变化的时候务必要调用确保滚动的效果正常。例：scroll.refresh();
                    this.$nextTick(()=>{
                        this.bscroll &&  this.bscroll.refresh();
                    })
                });
            });
        },

        watch:{
            page(newv, oldv){
                if(newv != oldv) {
                    this.getCategoryGoods();
                }
            },
            currentCid(newv, oldv){
                if(newv != oldv) {
                    this.page=0
                    this.goods[this.currentOrder].list=[];
                    this.goods[this.currentOrder].page = 0;
                    this.getCategoryGoods();

                }
            },
        },
        methods:{
            itemClick(id){
                this.$router.push({path:'/detail', query:{id}});
            },
            bTop(){
                this.bscroll.scrollTo(0, 0, 500)
            },

            getCategoryGoods(){
                getCategoryGoods(this.currentOrder, this.currentCid, this.goods[this.currentOrder].page).then(res=>{
                    if(res != undefined && res.status=='200'){
                        console.log(res.data.goods.data, "11111111111")
                     /*   if(res.data.goods.data.length > 0) {
                            const data = res.data.goods.data.map(item=>{
                                item.title = JSON.parse(item.title)[i18n.locale] ?? JSON.parse(item.title).zh
                                item.description = JSON.parse(item.description)[i18n.locale] ?? JSON.parse(item.description).zh
                                item.cover_url="http://oss.shop.eduwork.cn/" + (JSON.parse(item.cover).a ?? JSON.parse(item.cover).b);
                                return item;
                            });


                            let page = this.goods[this.currentOrder].page;
                            if(page !=1) {
                                this.goods[this.currentOrder].list.push(...data);
                            }

                            this.goods[this.currentOrder].page += 1;

                            this.$nextTick(()=>{
                                this.bscroll &&  this.bscroll.refresh();
                            })

                        }else {
                            this.loadshow = false
                            Toast.fail(i18n.t('shop.info.nodata'));
                        }*/

                    }
                })
            },

           getGoods(cid, index){
               this.activeKey = index;
                this.currentCid = cid;
                this.currentOrder = 'sales';


               this.$nextTick(()=>{
                    this.bscroll &&  this.bscroll.refresh();
                })

            }
        }
    }
</script>
<style scoped lang="less">
    .goods {
        display: flex;
        width: 96%;
        height: 100vh;
        border-radius: 4px;
        justify-content: space-around;
        align-items: center;
        flex-wrap: wrap;
        gap: 10px;
        margin:20px auto;

    }
    .wrapper {
        position: absolute;
        top:60px;
        bottom: 0px;
        left:0px;
        right:0px;
        overflow: hidden;
        .content {

        }
    }

    .goodslist{
        max-width: 550px;
        margin: 0 auto;
        font-size: 12px;
        border-top: #161616 solid 2px;
        background:#000;

    }

</style>
<style scoped>

    .van-card {
        border-radius: 4px;
        background-color: #181818;
        color:#FEFEFE;
        margin-left:15px;

    }

    .van-card__desc {
        color: #DEDEDE;
        font-size:12px;

    }

    .van-card__price {

        color: #DBDBDD;

    }

    .van-card__num {
        color: #BABABA;
    }

    .van-sidebar-item--select, .van-sidebar-item--select:active {
        background-color: #1F1B19 !important;
        width:82px !important;
    }

    .van-sidebar-item--select {
        color: #EFEFEF;
    }

    .van-sidebar-item--select::before {

        background-color: #FB6300;

    }

    .van-sidebar-item {

        color: #EFEFEF;
        background-color: #000000;
    }

    .van-sidebar {
        overflow-y: unset;

    }


</style>

<style scoped lang="less">
    .thumb {
        width:85px;
        img {
            width:85px;
            height:85px;
        }
    }
    .desc {
      /* 黑参制品是指经过特定加工处理，以黑参为主要原料制成的各类产品。黑参，又称玄参，是一种具有悠久药用历史的中药材，富含多种对人体有益的成分。 */

      position: absolute;
      width: 346px;
      height: 45px;
      left: calc(50% - 346px/2 + 2px);
      top: 371px;

      font-family: 'Dream Han Sans SC';
      font-style: normal;
      font-weight: 398;
      font-size: 12px;
      line-height: 15px;
      /* or 125% */
      letter-spacing: -0.02em;

      color: #FFFFFF;


    }

    .main {
        max-width: 550px;
        margin:auto;
        width:100%;
        background:#000;
    }

    .mainbox{
        background:#1F1B19;
        width:100%;
        display: flex;


        .menubar {
            width:80px;
            height:100vh;
            background:#000;
            position:fixed;
            top:60px;
            left:0px;
            z-index: 10;
        }

        .menu {
            flex-basis: 80px;
            width:80px;
            background:#1F1B19;
            position: sticky;
            top:0px;
        }





        .goodslist {
            flex-grow: 1;
            background:#1F1B19;
            padding:15px 15px 15px 0 !important;
            margin-bottom: 70px;
            flex:1;
            position: relative;
            top:60px;
            left:0px;
            right:0;
            height:100vh;
            text-align: left !important;
            .content {
                padding-top: 0px;
                position: relative;
                top:0px;
                left:0px;
                right:0;
                background-color: #1F1B19 !important;
            }
        }
    }
</style>